如果有錯誤，歡迎留言指教~ Q_Q 沒寫完啦

當每次 action 被 dispatch， state 就會立刻被更新

那要如何讓 Redux 可以處理非同步呢?

Middleware 是什麼?

Middleware 是一個中介層

在 dispatch action 後進入 reducer 之前

可以讓我們做一些介入 action 的時間點

透過 Middleware ，可以處理非同步事件、log、調整或停止 action

在 Redux 中並沒有限制 Middleware 的數量，因此我們可以有很多個 middleware

middleware 一個接著一個 middleware

每個 middleware 會檢查這是不是這次需要執行的 action

如果不是就會 next 給下一個 middleware 繼續處理。

如何使用

middleware

const logger = store => next => action => {
  console.log('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  return result
}

const crashReporter = store => next => action => {
  try {
    return next(action)
  } catch (err) {
    console.error('Caught an exception!', err)
    Raven.captureException(err, {
      extra: {
        action,
        state: store.getState()
      }
    })
    throw err
  }
}

把它運用到 Redux store 中：

將多個 middleware 依序傳進 applyMiddleware()

告訴 createStore() 如何處理 middleware

import { createStore, combineReducers, applyMiddleware } from 'redux'

let todoApp = combineReducers(reducers)
let store = createStore(
  todoApp,
  applyMiddleware(logger, crashReporter)
)

現在任何被 dispatch 到 store 實體的 action 都將經過 logger 和 crashReporter：

// 將經過 logger 和 crashReporter 兩個 middleware！
store.dispatch(addTodo('Use Redux'))

ref

1. https://chentsulin.github.io/redux/docs/advanced/AsyncActions.html